<template>
    <div>
         <el-form
            :label-width="80"
            :model="form"
            class="myform"
            status-icon 
            :rules="rules"
            ref="myform"
        >
             <el-form-item label="手机号码"  prop="phone">
                <el-input 
                    type="text" 
                    placeholder="请输入" 
                    v-model="form.phone"  
                ></el-input>
            </el-form-item>
            <el-form-item label="验证号码"  prop="captcha">
                <!-- <el-input 
                    type="text" 
                    placeholder="请输入" 
                    v-model="form.captcha"  
                >
                    <template #append>
                        <el-button @click="startSend" type="success">Success</el-button>
                    </template>
                </el-input> -->
                <el-row>
                    <el-col :span="13">
                        <el-input 
                            type="text" 
                            placeholder="请输入" 
                            v-model="form.captcha"  
                        >
                        </el-input>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-button @click="startSend" v-if="flag" :disabled="disabled" type="success">发送验证码</el-button>
                        <el-button  v-else :disabled="disabled" >剩余 {{count}} S</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <p class="flex">
                    <el-button type="primary" class="btn" @click="submitForm('myform')"
                        >验证</el-button
                    >
                    <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                </p>
            </el-form-item>
            <el-form-item class="lastitem">
                <div class="links">
                    <router-link class="litem" :to="{name:'register'}">
                        没有账号,立即注册
                    </router-link>
                        <router-link class="litem color"  :to="{name:'forgetpass'}">
                        忘记密码 
                    </router-link>
                </div>
            </el-form-item>
         </el-form>
    </div>
</template>

<script>
import {ref,toRefs,reactive,watch,onUnmounted , onMounted} from "vue"
import {reg} from "@/utils/validate"
import {toast} from "@/utils"
import {ajax} from "@/api"
import {useRouter} from "vue-router"
var timer = null 
export default {
    name:"loginphone",
    setup(){
        const myform = ref()
        const router = useRouter()
        const state = reactive({
            form:{},
            disabled:true,
            flag:true,
            count:120,
            rules:{
                phone:[
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.phone,
                        message:"请输入正确的手机号",
                        trigger:"blur"
                    }
                ],
                captcha:[
                     {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur',
                    },
                     {
                        pattern:reg.code,
                        message:"请输入正确的验证码",
                        trigger:"blur"
                    }
                ]
            }
        })

        onMounted(()=>{
            state.form.phone = localStorage.getItem("phone")
        })
        const resetForm = ()=>{
            myform.value.resetFields()
        }
        watch(state.form,(v)=>{
            console.log(v)
            if(reg.phone.test(v.phone)){
                state.disabled = false
            }else{
                state.disabled = true 
            }
        })

        onUnmounted(()=>{
            clearInterval(timer)
            timer  = null
            state.count = 120;
            state.flag = true;
        })
        const submitForm = ()=>{
            myform.value.validate(async (valid)=>{
                if(valid){
                    let {code,result,token } = await ajax.verifycaptcha(state.form)
                    if(code==200){
                        router.push({name:'main'})
                        localStorage.setItem("phone",state.form.phone)
                        sessionStorage.setItem("token",token)
                    }else{
                         toast.error("验证码错误.")
                    }
                }else{
                    toast.error("请输入有限的验证信息.")
                }
            })
        }
        const startSend = ()=>{

            state.count--;
            state.flag = false;
            timer = setInterval(()=>{
                if(state.count>0){
                    state.count--;
                    state.flag = false;
                }else{
                    clearInterval(timer)
                    timer  = null
                    state.count = 120;
                    state.flag = true;
                }
            },1000)

            sendCode()
        }

        const sendCode = async ()=>{
            let {result,code} = await ajax.sendcaptcha({phone:state.form.phone})
            if(code!=200){
                clearInterval(timer)
                timer  = null
                state.count = 120;
                state.flag = true;
            }
        }

        
        return {
            myform,
            ...toRefs(state),
            startSend,
            submitForm
        }
    }
}
</script>


<style lang="scss" scoped>

.lastitem{
    ::v-deep .el-form-item__content{
        line-height:1;
    }
}

</style>